/**
 * React.Component
 */
class HelloMessage extends React.Component {
    render() {
        return <div>Hello {this.props.name}</div>;
    }
}
ReactDOM.render(<HelloMessage name="Jack"/>, document.querySelector('#container1'));

/**
 * React.createClass(obj)
 * 创建一个组件类, 组件实现 render 方法, render 返回一个子级(可能包含很深的子级结构)
 */
var Chat = React.createClass({
    render() {
        return (
            <div>
                <h3>User: {this.props.fromUser}</h3>
                <HelloMessage name={this.props.toUser}/>
            </div>
        );
    }
});
ReactDOM.render(<Chat fromUser="Jack" toUser="Tom"/>, document.querySelector('#container2'));

/**
 * React.createElement(DOMElement el/ReactClass type[, object props][, children ...])
 * 创建并返回一个新的指定类型的 ReactElement
 */
var el = React.createElement('span', {
    className: 'my-classes',
    name     : 'jack',
    title    : 'hello'
}, React.createElement('span', null, 'hello'));
var El = React.createClass({
    render(){
        return el;
    }
});
ReactDOM.render(<El />, document.querySelector('#container3'));

/**
 * React.cloneElement(ReactElement element[, object props][, children ...])
 * 复制并返回一个新的指定类型的 ReactElement
 */
var CloneEl = React.createClass({
    render() {
        return React.cloneElement(el, {
            className: 'clone-el', // 属性覆盖(新老 props merged)
            title    : 'clone`s el'
        }, 'child 被 replace 了');
    }
});
ReactDOM.render(<CloneEl />, document.querySelector('#container4'));

/**
 * React.createFactory(string/ReactClass type)
 * 返回一个用于生成给定类型的ReactElement的函数, type 可以是html标签名字, 也可以是ReactClass对象
 */
var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', {className: 'my-list'}, child1, child2);
ReactDOM.render(root, document.getElementById('container5'));

var factory = React.createFactory("li");
var ulfactory = React.createFactory('ul');
var child11 = factory(null, 'First Text Content');
var child22 = factory(null, 'Second Text Content');
var root1 = ulfactory({className: 'my-list'}, child11, child22);
ReactDOM.render(root1, document.querySelector('#container6'));

/**
 * React.isValidElement(* object)
 * 判断 object 是不是 ReactElement
 */
// number
console.log(React.isValidElement(1));
// string
console.log(React.isValidElement('a'));
// null
console.log(React.isValidElement(null));
// undefined
console.log(React.isValidElement(undefined));
// object
console.log(React.isValidElement({}));
// ReactFactory
console.log(React.isValidElement(factory));
// ReactElement
console.log(React.isValidElement(root));
// ReactClass
console.log(React.isValidElement(CloneEl));

/**
 * React.DOM.xx(props, ...child)
 * xx 是原生 html 的 tag, 如: React.DOM.li, React.DOM.div 等.
 * React.DOM.div(..) 就类似于 React.createFactory('div')(..)
 */
ReactDOM.render(React.DOM.div(null, 'React.DOM.div(null, "")', React.DOM.span(null, '12')), document.querySelector('#container7'));

/**
 * React.PropTypes
 * 验证传入数据的有效性
 * 更多验证属性参考: https://facebook.github.io/react/docs/reusable-components.html
 */
console.log(React.PropTypes);
var MyValidComponent = React.createClass({
    propTypes: {
        children: React.PropTypes.element.isRequired
    },
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
});
ReactDOM.render(
    <MyValidComponent>
        {/*<span>1122</span>*/}
    </MyValidComponent>,
    document.querySelector('#container8')
);
